<!-- 我的拼团 -->
<template>
	<view class="page_box">
		<view class="head_box" style="background-color: #B4D701;">
			<cu-custom :isBack="!isTabbar" :bgColor="bgColor"><block slot="content">我的团队</block></cu-custom>
		</view>
		<view class="content_box">
			<view class="head padding-lg flex align-center justify-between">
				<view class=" flex align-center">
					<image
						:src="userInfo.avatar || $IMG_URL + '/imgs/base_avatar.png'"
						mode=""
						style="width: 98rpx; height: 98rpx;"
						class="radius "
					></image>
					<view class="flex flex-direction margin-left justify-between">
						<text class="text-lg text-bold">多多分享赚取佣金</text>
						<view class="flex text-grey " v-if="data.share">
							<text>我的上级</text>
							<text class="margin-left">{{ data.share.nickname ? data.share.nickname : '' }}</text>
						</view>
					</view>
				</view>
				<view class="invite flex align-center justify-center" @tap="jump('/pages/public/poster/index', { posterType: 'user' })">
					<text>邀请</text>
					<view class="cuIcon-right margin-left"></view>
				</view>
			</view>
			<view class="team response padding-top padding-lr flex justify-between">
				<view class="team-l padding-sm flex flex-direction">
					<text class="text-sm text-grey" style="color: #999999 !important; ">所在团队</text>
					<view class="response flex justify-center align-center flex-direction" style="height: 100%;">
						<text class="text-bold">成员人数</text>
						<text class="text-xl text-bold text-olive">{{ data.suozai }}人</text>
					</view>
				</view>
				<view class="team-r padding-sm flex flex-direction">
					<text class="text-sm text-grey" style="color: #999999 !important;">管理团队</text>
					<view class="response flex justify-around align-center " style="height: 100%;">
						<view class="flex flex-direction align-center ">
							<text class="text-bold">成员人数</text>
							<text class="text-xl text-bold text-olive">{{ data.manage_relationship_count }}人</text>
						</view>
						<view class="flex-direction flex align-center">
							<text class="text-bold">佣金</text>
							<text class="text-xl text-bold text-olive">{{ data.yongjin }}</text>
						</view>
					</view>
				</view>
			</view>
			<block v-if="data.suozaiselect.length && data.manage_relationship_select">
				<u-sticky>
					<view class="navbar  flex align-center justify-center text-xl text-bold text-olive ">
						<text class="" @click="click(1)" :class="e == 1 ? 'style' : ''">所在团队</text>
						<text class="margin-left" @click="click(2)" :class="e == 2 ? 'style' : ''">管理团队</text>
					</view>
				</u-sticky>
				<view class="info padding" v-if="e == 1">
					<text class="text-gray">团队详情</text>
					<view v-for="(item, index) in data.suozaiselect" :key="index" class="flex-direction">
						<view class="list padding-tb-sm flex align-center solid-bottom justify-between ">
							<view class="flex  align-center">
								<image :src="item.avatar" mode="aspectFill" style="width: 98rpx;height: 98rpx;" class="round "></image>

								<view class=" flex flex-direction justify-between   margin-left" style="height: 100%;">
									<text>{{ item.nickname }}</text>
									<text class=" text-price text-bold  text-red">
										<text class="text-gray margin-left-xs">{{ item.buy_money }}</text>
									</text>
									<view class=" cuIcon-favor text-bold  text-red">
										<text class="text-gray margin-left-xs">{{ item.score }}</text>
									</view>
								</view>
							</view>
							<!-- <view class="cuIcon-phone padding-left-xs">{{item.mobile}}</view> -->
						</view>
					</view>
				</view>
				<view class="info padding" v-if="e == 2">
					<text class="text-gray">团队详情</text>
					<view v-for="(item, index) in data.manage_relationship_select" :key="index" class="flex-direction">
						<view class="list padding-tb-sm flex align-center solid-bottom justify-between">
							<view class=" flex align-center">
								<image :src="item.avatar" mode="aspectFill" style="width: 98rpx;height: 98rpx;" class="round "></image>

								<view class="flex flex-direction justify-center  margin-left">
									<text>{{ item.nickname }}</text>
									<!-- <text class="text-gray text-bold">2021.03.26 12:25</text> -->
								</view>
							</view>
							<view class="commission flex align-center justify-around" style="white-space: nowrap;">
								<text>佣金</text>
								<text>{{ item.money }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
import shActivityCard from '../children/sh-activity-card.vue';
export default {
	components: {
		shActivityCard,
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
		}),
	},
	data() {
		return {
			bgColor: '#B4D701',
			e: 1,
			data: {},

			isLoading: true,
			isTriggered: false, //下拉刷新状态，是否被触发。
			loadStatus: 'loadmore', //loadmore:加载前的状态，loading:加载中的状态，nomore-没有更多的状态
			lastPage: 1,
			currentPage: 1,
			emptyData: {
				img: this.$IMG_URL + '/imgs/empty/empty_groupon.png',
				tip: '暂无此类拼团商品，更多拼团好货等着你噢~',
				path: '/pages/index/index',
				pathText: '去首页逛逛',
			},
			showShare: false,
			stateId: 'all',
			grouponStatus: {
				finish: this.$IMG_URL + '/imgs/group_state_succeed.png',
				'finish-fictitious': this.$IMG_URL + '/imgs/group_state_succeed.png',
				invalid: this.$IMG_URL + '/imgs/group_state_failed.png',
			},
			myGrouponList: [], //我的拼团列表。
			shareGoodsInfo: {}, //分享海报信息。
		};
	},

	onLoad() {
		this.getMyGroupon();
	},
	onPullDownRefresh() {
		this.myGrouponList = [];
		this.getMyGroupon();
	},
	methods: {
		click(e) {
			this.e = e;
		},

		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getMyGroupon();
			}
		},
		// 我的拼团
		getMyGroupon() {
			let that = this;

			that.$api('teamInfo', {}).then(res => {
				this.data = res.data;
				console.log('res: ', res);
			});
		},
	},
};
</script>

<style lang="scss">
page {
	text {
		font-family: PingFang SC;
	}
}
.order-nav {
	background: #fff;
	height: 80rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #fff;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}

// 拼团卡片
.head {
	width: 100vw;
	height: 203rpx;
	background: #b4d701;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	// border-radius: 50%;
	.invite {
		width: 162rpx;
		height: 68rpx;
		background: #ffffff;
		border-radius: 34rpx;
	}
}
.team {
	.team-l {
		width: 267rpx;
		height: 187rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
		border-radius: 10rpx;
	}
	.team-r {
		width: 406rpx;
		height: 187rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
		border-radius: 10rpx;
	}
}
.info {
	width: 690rpx;
	// height: 710rpx;
	background: #ffffff;
	box-shadow: 0rpx 4rpx 13rpx 1rpx rgba(153, 153, 153, 0.2);
	border-radius: 20rpx;
	margin: 0 auto;
	// margin-top: 25rpx;.
	.commission {
		//width: 132rpx;
		//height: 56rpx;
		padding: 5rpx 10rpx;
		background: #b4d701;
		border-radius: 28rpx;

		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
}
.navbar {
	height: 100rpx;
	background-color: #f5f5f5;
}
.style {
	border-bottom: 10rpx solid #b4d701;
}
</style>
